<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <style>
    /* 定义myfade动画开始进入的起点 + 离去的终点 */
    .myfade-enter,
    .myfade-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }

    /* 定义进入动画/离去动画的激活状态 */
    .myfade-enter-active,
    .myfade-leave-active {
      transition: all 1s;
    }


    /* 定义myfade动画开始进入的起点 + 离去的终点 */
    @keyframes myanim {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }

      100% {
        opacity: 1;
        transform: translateX(0px);
      }
    }

    /* 定义进入动画的激活状态 */
    .mybounce-enter-active {
      animation: myanim 1s;
    }

    /* 定义离去动画的激活状态 */
    .mybounce-leave-active {
      animation: myanim 1s reverse;
    }

  </style>

  <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" type="text/css"> -->

  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>

  <!-- <h1 class="animated hinge infinite">1111111111111</h1> -->

  <div id="box">
    <button @click="isShow=!isShow">click</button>

    <!-- <transition name="myfade">
      <div v-if="isShow">1111111111111</div>
    </transition> -->

    <transition name="mybounce">
      <div v-if="isShow">222222222</div>
    </transition>


  </div>

  <script>
    var vm = new Vue({
      el: "#box",
      data: {
        isShow: false
      }
    })

  </script>

</body>

</html>